<template>
	<div class="login-and-out">
		<div class="logout" v-if="isLogin">
				<button @click="logout">注销</button>
		</div>
		<div class="login" v-else>
			<router-link class="login-link" to="login">登录</router-link>
			<div class="separator">&nbsp;|&nbsp;</div>
      <router-link class="login-link" to="register">注册</router-link>
    </div>
		
	</div>
</template>
<script lang="ts">
import { defineComponent, computed, watch } from 'vue'
import store from '@/store';
import router from '@/router';
export default defineComponent({
	setup() {
		const logout = () => {
      store.commit('logout');
    }
		const isLogin = computed(() =>{
      return store.state.userInfo.isLogin;
    });
    watch(isLogin,(newValue,oldValue) => {
      if (!newValue && oldValue ) {
          router.push('main');
        }
    });
		return {
			logout,
			isLogin,
		}
	},

})
</script>
<style lang="scss" scoped>
  .login-and-out {
		margin-top: 7px;
		margin-right: 20px;
		float: right;
	}
	a {
    color: white;
    text-decoration: none;
  }
	.separator{
		display:inline-block;
		color: white;
	}
	button{
		border: none;
		background-color: transparent;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}
</style>
